<template>
    <div class="iconList">
        <div class="icons" v-for="(icon, index) in iconList" :key="index">
            <i :class="icon"></i>
            <span class="icon-name">{{icon}}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'IconList',
    data() {
        return {
            iconList: [
                'gea gea-icon-home',
                'gea gea-icon-auth',
                'gea gea-icon-menu',
                'gea gea-icon-role',
                'gea gea-icon-team',
                'gea gea-icon-api',
                'gea gea-icon-setting',
                'gea gea-icon-dict',
                'gea gea-icon-tool',
                'gea gea-icon-code',
                'gea gea-icon-form',
                'gea gea-icon-server',
                'gea gea-icon-log',
                'gea gea-icon-operation',
                'gea gea-icon-user',
                'gea gea-icon-exam',
                'gea gea-icon-icon',
                'gea gea-icon-about',
                'gea gea-icon-we',
                'el-icon-platform-eleme',
                'el-icon-eleme',
                'el-icon-delete-solid',
                'el-icon-delete',
                'el-icon-s-tools',
                'el-icon-setting',
                'el-icon-user-solid',
                'el-icon-user',
                'el-icon-phone',
                'el-icon-phone-outline',
                'el-icon-more',
                'el-icon-more-outline',
                'el-icon-star-on',
                'el-icon-star-off',
                'el-icon-s-goods',
                'el-icon-goods',
                'el-icon-warning',
                'el-icon-warning-outline',
                'el-icon-question',
                'el-icon-info',
                'el-icon-remove',
                'el-icon-circle-plus',
                'el-icon-success',
                'el-icon-error',
                'el-icon-zoom-in',
                'el-icon-zoom-out',
                'el-icon-remove-outline',
                'el-icon-circle-plus-outline',
                'el-icon-circle-check',
                'el-icon-circle-close',
                'el-icon-s-help',
                'el-icon-help',
                'el-icon-minus',
                'el-icon-plus',
                'el-icon-check',
                'el-icon-close',
                'el-icon-picture',
                'el-icon-picture-outline',
                'el-icon-picture-outline-round',
                'el-icon-upload',
                'el-icon-upload2',
                'el-icon-download',
                'el-icon-camera-solid',
                'el-icon-camera',
                'el-icon-video-camera-solid',
                'el-icon-video-camera',
                'el-icon-message-solid',
                'el-icon-bell',
                'el-icon-s-cooperation',
                'el-icon-s-order',
                'el-icon-s-platform',
                'el-icon-s-fold',
                'el-icon-s-unfold',
                'el-icon-s-operation',
                'el-icon-s-promotion',
                'el-icon-s-home',
                'el-icon-s-release',
                'el-icon-s-ticket',
                'el-icon-s-management',
                'el-icon-s-open',
                'el-icon-s-shop',
                'el-icon-s-marketing',
                'el-icon-s-flag',
                'el-icon-s-comment',
                'el-icon-s-finance',
                'el-icon-s-claim',
                'el-icon-s-custom',
                'el-icon-s-opportunity',
                'el-icon-s-data',
                'el-icon-s-check',
                'el-icon-s-grid',
                'el-icon-menu',
                'el-icon-share',
                'el-icon-d-caret',
                'el-icon-caret-left',
                'el-icon-caret-right',
                'el-icon-caret-bottom',
                'el-icon-caret-top',
                'el-icon-bottom-left',
                'el-icon-bottom-right',
                'el-icon-back',
                'el-icon-right',
                'el-icon-bottom',
                'el-icon-top',
                'el-icon-top-left',
                'el-icon-top-right',
                'el-icon-arrow-left',
                'el-icon-arrow-right',
                'el-icon-arrow-down',
                'el-icon-arrow-up',
                'el-icon-d-arrow-left',
                'el-icon-d-arrow-right',
                'el-icon-video-pause',
                'el-icon-video-play',
                'el-icon-refresh',
                'el-icon-refresh-right',
                'el-icon-refresh-left',
                'el-icon-finished',
                'el-icon-sort',
                'el-icon-sort-up',
                'el-icon-sort-down',
                'el-icon-rank',
                'el-icon-loading',
                'el-icon-view',
                'el-icon-c-scale-to-original',
                'el-icon-date',
                'el-icon-edit',
                'el-icon-edit-outline',
                'el-icon-folder',
                'el-icon-folder-opened',
                'el-icon-folder-add',
                'el-icon-folder-remove',
                'el-icon-folder-delete',
                'el-icon-folder-checked',
                'el-icon-tickets',
                'el-icon-document-remove',
                'el-icon-document-delete',
                'el-icon-document-copy',
                'el-icon-document-checked',
                'el-icon-document',
                'el-icon-document-add',
                'el-icon-printer',
                'el-icon-paperclip',
                'el-icon-takeaway-box',
                'el-icon-search',
                'el-icon-monitor',
                'el-icon-attract',
                'el-icon-mobile',
                'el-icon-scissors',
                'el-icon-umbrella',
                'el-icon-headset',
                'el-icon-brush',
                'el-icon-mouse',
                'el-icon-coordinate',
                'el-icon-magic-stick',
                'el-icon-reading',
                'el-icon-data-line',
                'el-icon-data-board',
                'el-icon-pie-chart',
                'el-icon-data-analysis',
                'el-icon-collection-tag',
                'el-icon-film',
                'el-icon-suitcase',
                'el-icon-suitcase-1',
                'el-icon-receiving',
                'el-icon-collection',
                'el-icon-files',
                'el-icon-notebook-1',
                'el-icon-notebook-2',
                'el-icon-toilet-paper',
                'el-icon-office-building',
                'el-icon-school',
                'el-icon-table-lamp',
                'el-icon-house',
                'el-icon-no-smoking',
                'el-icon-smoking',
                'el-icon-shopping-cart-full',
                'el-icon-shopping-cart-1',
                'el-icon-shopping-cart-2',
                'el-icon-shopping-bag-1',
                'el-icon-shopping-bag-2',
                'el-icon-sold-out',
                'el-icon-sell',
                'el-icon-present',
                'el-icon-box',
                'el-icon-bank-card',
                'el-icon-money',
                'el-icon-coin',
                'el-icon-wallet',
                'el-icon-discount',
                'el-icon-price-tag',
                'el-icon-news',
                'el-icon-guide',
                'el-icon-male',
                'el-icon-female',
                'el-icon-thumb',
                'el-icon-cpu',
                'el-icon-link',
                'el-icon-connection',
                'el-icon-open',
                'el-icon-turn-off',
                'el-icon-set-up',
                'el-icon-chat-round',
                'el-icon-chat-line-round',
                'el-icon-chat-square',
                'el-icon-chat-dot-round',
                'el-icon-chat-dot-square',
                'el-icon-chat-line-square',
                'el-icon-message',
                'el-icon-postcard',
                'el-icon-position',
                'el-icon-turn-off-microphone',
                'el-icon-microphone',
                'el-icon-close-notification',
                'el-icon-bangzhu',
                'el-icon-time',
                'el-icon-odometer',
                'el-icon-crop',
                'el-icon-aim',
                'el-icon-switch-button',
                'el-icon-full-screen',
                'el-icon-copy-document',
                'el-icon-mic',
                'el-icon-stopwatch',
                'el-icon-medal-1',
                'el-icon-medal',
                'el-icon-trophy',
                'el-icon-trophy-1',
                'el-icon-first-aid-kit',
                'el-icon-discover',
                'el-icon-place',
                'el-icon-location',
                'el-icon-location-outline',
                'el-icon-location-information',
                'el-icon-add-location',
                'el-icon-delete-location',
                'el-icon-map-location',
                'el-icon-alarm-clock',
                'el-icon-timer',
                'el-icon-watch-1',
                'el-icon-watch',
                'el-icon-lock',
                'el-icon-unlock',
                'el-icon-key',
                'el-icon-service',
                'el-icon-mobile-phone',
                'el-icon-bicycle',
                'el-icon-truck',
                'el-icon-ship',
                'el-icon-basketball',
                'el-icon-football',
                'el-icon-soccer',
                'el-icon-baseball',
                'el-icon-wind-power',
                'el-icon-light-rain',
                'el-icon-lightning',
                'el-icon-heavy-rain',
                'el-icon-sunrise',
                'el-icon-sunrise-1',
                'el-icon-sunset',
                'el-icon-sunny',
                'el-icon-cloudy',
                'el-icon-partly-cloudy',
                'el-icon-cloudy-and-sunny',
                'el-icon-moon',
                'el-icon-moon-night',
                'el-icon-dish',
                'el-icon-dish-1',
                'el-icon-food',
                'el-icon-chicken',
                'el-icon-fork-spoon',
                'el-icon-knife-fork',
                'el-icon-burger',
                'el-icon-tableware',
                'el-icon-sugar',
                'el-icon-dessert',
                'el-icon-ice-cream',
                'el-icon-hot-water',
                'el-icon-water-cup',
                'el-icon-coffee-cup',
                'el-icon-cold-drink',
                'el-icon-goblet',
                'el-icon-goblet-full',
                'el-icon-goblet-square',
                'el-icon-goblet-square-full',
                'el-icon-refrigerator',
                'el-icon-grape',
                'el-icon-watermelon',
                'el-icon-cherry',
                'el-icon-apple',
                'el-icon-pear',
                'el-icon-orange',
                'el-icon-coffee',
                'el-icon-ice-tea',
                'el-icon-ice-drink',
                'el-icon-milk-tea',
                'el-icon-potato-strips',
                'el-icon-lollipop',
                'el-icon-ice-cream-square',
                'el-icon-ice-cream-round',
            ],
        }
    },
}
</script>

<style lang="scss" scoped>
.iconList {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    .icons {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        border: 1px solid rgba($color: #000000, $alpha: 0.1);
        width: 180px;
        height: 150px;
        i {
            font-size: 5em;
        }
        span {
            font-size: 1em;
        }
    }
}
</style>
